'use client';

import { useActionState } from 'react';
import { addItemPhotoAction } from '@/lib/account/actions';
import { idle } from '@/lib/auth/state';
import { FormMessage, SubmitButton } from '@/components/account/form';

export function PhotoUploadForm({ itemId }: { itemId: string }) {
  const [state, action] = useActionState(addItemPhotoAction, idle);
  return (
    <form action={action} className="space-y-2">
      <input type="hidden" name="itemId" value={itemId} />
      <FormMessage state={state} />
      <input type="file" name="files" accept="image/jpeg,image/png,image/webp" multiple capture="environment" className="block w-full text-xs text-muted file:mr-3 file:rounded-md file:border file:border-border file:bg-elevated file:px-3 file:py-1.5 file:text-xs file:font-medium file:text-fg" />
      <SubmitButton variant="secondary" pendingText="Uploading…">
        Upload photos
      </SubmitButton>
      <p className="text-[11px] text-subtle">JPEG/PNG/WebP up to 8 MB each. On mobile you can take a photo directly.</p>
    </form>
  );
}